<template>
  <div class="home">
    <form action="/">
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        @search="onSearch"
        @cancel="onCancel"
      />
    </form>
    <van-tree-select v-model:main-active-index="activeIndex" :items="items" height="92vh">
      <template #content>
        <FoodItem></FoodItem>
        <van-image
          v-if="activeIndex === 0"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-1.jpeg"
        />
        <van-image
          v-if="activeIndex === 1"
          src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-2.jpeg"
        />
        
      </template>
    </van-tree-select>
  </div>
</template>

<script setup lang="ts">
import { Ref, ref } from "vue";
import { Toast } from "vant";
import FoodItem from "./components/FoodItem.vue";

const value: Ref<string> = ref("");

const onSearch = (val: string) => Toast(val);
const onCancel = () => Toast("取消");
const activeIndex = ref(0);
const items = [{ text: "分组 1" ,badge:5}, { text: "分组 2",badge:5}];
</script>

<style lang="less" scoped>
.home {
  height: 100vh;

  form {
    height: 8vh;
  }
}
</style>
